이펙트 만들기27 패럴랙스 이펙트 06 패럴랙스 이펙트 자바스크립트를 이용해 스크롤 시 다양한 효과가 발생하는 이펙트 만들기 입니다. 패럴랙스 이펙트 06 - 텍스트 효과 스크롤을 내릴 때 텍스트의 각 문자가 시간차를 두고 등장하는 효과입니다. 코드 보기 스크롤 위치에 따라 문자를 나타내는건 쉽지만 각각의 문자를 따로 나타내게 하려면 split( )과 join( )메서드를 사용해야 합니다. 소스보기 -HTML파트- 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛.. 2022. 9. 30. 서치 이펙트 05 서치 이펙트 자바스크립트를 이용한 검색 기능 효과 만들기 입니다. 서치 이펙트 05 - filter( )를 이용하여 속성의 중요도 보여주기 조건 적용이 가능한 filter( ) 메서드를 활용해 범위 검색을 하는 효과입니다. 1. 중요도 정리 및 레이아웃 만들기 속성 별 중요도(숫자)를 설정하고 시각적으로 알 수 있는 버튼을 만드는 작업입니다. 소스보기 -HTML- filter( )를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 🌑🌑🌑🌑🌑 ⭐🌑🌑🌑🌑 ⭐⭐🌑🌑🌑 ⭐⭐⭐🌑🌑 ⭐⭐⭐⭐🌑 ⭐⭐⭐⭐⭐ ⭐ 1개 이상 ⭐ 2개 이상 ⭐ 3개 이상 ⭐ 4개 이상 전체 속성 갯수 : -CSS- :root { --htmlColor: #223547; --cssColor: #5042a4; --javascriptColo.. 2022. 9. 30. 서치 이펙트 04 서치 이펙트 자바스크립트를 이용한 검색 기능 효과 만들기 입니다. 서치 이펙트 03 - find( )를 이용한 속성 검색 find( ) 메서드를 사용해 검색 또는 목록 클릭 시 해당 속성의 설명이 출력되는 효과입니다. 1. 검색창 만들기 검색 창과 속성 목록, 속성의 설명이 쓰여질 공간을 만듭니다. 소스보기 -HTML- find( )를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다!!! 전체 속성 갯수 : -CSS- /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid var(--htmlColor); bor.. 2022. 9. 29. 마우스 이펙트 05 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 05 - 기울기 효과 및 글씨 반전 효과 이미지에 3D 효과가 적용되어 있어 마우스 커서를 움직일 시 커서의 위치에 따라 이미지가 움직이며 이미지에 커서를 겹칠 시 커서 안의 이미지에 효과가 발생합니다. 1. 이미지를 3D로 바꾸기 이미지가 움직일 때 3D처럼 보이도록 CSS로 효과를 줍니다. 소스보기 -HTML- If you can dream it, you can do it 꿈을 꿀 수 있다면 할 수 있습니다. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px maxPageX : 0px maxPageY : 0px anglePageX : 0px angl.. 2022. 9. 28. 패럴랙스 이펙트 04 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 04 - 나타나기 스크롤 바를 내릴 때 마다 컨텐츠에 애니메이션이 발동하는 효과합니다. 1. HTML 및 CSS 파트 HTML은 이전과 같지만 CSS에 텍스트와 이미지가 움직이는 효과가 추가됩니다. 소스보기 -HTML 파트- 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. 06 section6 폼은 일시적이지만, 클래스는 영원하다.. 2022. 9. 26. 패럴랙스 이펙트 03 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 03 - 숨김 메뉴 스크롤 위치에 따라 메뉴 바 등 숨겨진 창이 등장하는 효과입니다. 1. 메뉴 바 및 탑 버튼 만들기 스크롤에 따라 나오게 될 메뉴 바와 탑 버튼 제작입니다. 기본적인 구성은 이전 패럴랙스 이펙트 효과와 같고 탑 버튼이 추가되었습니다. 소스보기 -HTML 파트- 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 .. 2022. 9. 24. 슬라이드 이펙트 04 슬라이드 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이드 이펙트 04 - 이미지 슬라이드 버튼 이미지 내에 있는 버튼을 클릭 시 이미지가 좌/우로 이동하는 슬라이드 효과입니다. 1. 좌/우 버튼 만들기 클릭 시 이미자가 좌/우로 이동할 수 있도록 좌측과 우측에 각각 버튼을 만들어 줍니다. 기본적인 코드는 슬라이드 이펙트 03와 같으며 버튼이 추가되었습니다. 소스보기 -HTML 파트- prev next -슬라이드 버튼 CSS- .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(0,0,0,0.4); text-align: cen.. 2022. 9. 24. 슬라이드 이펙트 03 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 - 로테이션 효과 02 위치가 리셋되지 않고 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다. 슬라이더 이펙트 02와 기본적인 효과는 같지만 마지막 사진 이후 로테이션이 될때 오른쪽 처음으로 돌아가지 않고 계속 좌측으로 로테이션이 되도록 하는 효과입니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; hei.. 2022. 9. 24. 마우스 이펙트 효과 04 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 04 - 이미지 효과 마우스가 이미지 안에서 움직일 때 이미지가 살짝 커지며 이동하는 효과입니다. 1. 이미지 세팅 가운데에 이미지를 하나 넣고 마우스 커서가 될 원 하나를 만드는 간단한 작업입니다. 소스보기 ▶ CSS 파트 /* mouseType */ #mouseType {} .mouse__cursor {} .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidden; } .mouse__wrap figure.. 2022. 9. 23. 마우스 이펙트 03 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 03 - 조명 효과 원 모양의 커서 안에 숨겨진 뒷 배경이 보이는 효과 입니다. 1. 원 만들기 우선 커서가 될 큰 원 하나를 만듭니다. 원을 만들 때 원 안에 배경이 들어가 있어야 합니다. html 파트는 마우스 이펙트 01을 그대로 사용합니다. 소스보기 //CSS /* mouseType */ #mouseType {} .mouse__cursor {} .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidde.. 2022. 9. 22. 마우스 이펙트 02 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 02 - 마우스 따라다니기(GSAP) 이번 효과는 마우스 이펙트 01과 같지만 스크립트를 GSAP로 만드는 작업입니다. GSAP GSAP는 GrennSock에서 개발한 애니메이션 효과를 쉽게 사용할 수 있도록 제공하는 타임라인 기반의 애니메이션 자바스크립트 라이브러리로 애니메이션 스크립트를 보다 쉽게 사용할 수 있도록 해줍니다. 또한 GSAP를 사용하면 자바스크립트로 구현할 때 보다 좀 더 애니메이션 효과가 부드러워지는 느낌이 납니다. GSAP 설치에 대한 설명은 이쪽을 참조해 주세요. 소스보기 const cursor = document.querySelector(".mouse__cursor"); const cursor2 = d.. 2022. 9. 22. 패럴랙스 이펙트 05 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 05 - 이질감 효과 스크롤바 위치에 따라 텍스트와 이미지 등이 서로 다르게 움직여 이질감이 느껴지게 하는 효과입니다. ▶ 코드 이질감 효과는 스크롤 좌표값에 오프셋 좌표값을 뺀 값에 약간의 조정을 한 값을 각 컨텐츠에 적용합니다. 스크롤 좌표값과 오프셋 좌표값은 화면에 보이는 좌표값이기 때문에 거의 같아 빼면 0에 가깝게 되지만 오차가 항상 발생해 0이 되진 않습니다. //CSS 코드 #parallax__nav { position: fixed; right: 20px; top: 20px; z-index: 2000; background-color: rgba(0,0,0,0.4); padding: 20px 30px; borde.. 2022. 9. 21. 이전 1 2 3 다음
